<script setup lang="ts">
import { ref } from 'vue'
import Sidebar from './components/Sidebar.vue'
import Header from './components/Header.vue'
import MessageArea from './components/MessageArea.vue'
import InputArea from './components/InputArea.vue'
import ModelSelector from './components/ModelSelector.vue'

import BaseDialog from '@/components/common/Dialog.vue' // 导入组件

const isDialogOpen = ref(false)

const openDialog = () => {
  isDialogOpen.value = true
}

const closeDialog = () => {
  isDialogOpen.value = false
  console.log('Dialog closed')
}

defineOptions({
  name: 'Home'
})

// 控制模型选择器是否显示
const showModelSelector = ref(false)

// 当前选择的模型
const currentModel = ref({
  id: 'Qwen',
  name: 'Qwen'
})

// 打开模型选择器
const openModelSelector = () => {
  showModelSelector.value = true
}

// 关闭模型选择器
const closeModelSelector = () => {
  showModelSelector.value = false
}

// 选择模型
const selectModel = (modelId: string) => {
  // 根据modelId查找对应的模型信息并更新currentModel
  const modelNames: Record<string, string> = {
    Qwen: 'Qwen',
    deepseek: 'DeepSeek',
    gemini: 'Google Gemini',
    superbot: 'Superbot'
  }

  currentModel.value = {
    id: modelId,
    name: modelNames[modelId] || 'AI Assistant'
  }

  // 关闭选择器
  closeModelSelector()
}

/** 列表相关 */
const chatList = ref([
  {
    id: 1,
    name: 'AI 聊天'
  },
  {
    id: 2,
    name: 'AI 绘画'
  },
  {
    id: 3,
    name: '文档问答'
  },
  {
    id: 4,
    name: '代码助手'
  }
])

// 新建聊天
const handleNewChat = () => {
  const newId = Date.now()
  chatList.value.unshift({
    id: newId,
    name: `新聊天 ${newId}`
  })
}

// 删除聊天
const handleDeleteChat = (id: number) => {
  const index = chatList.value.findIndex(item => item.id === id)
  if (index !== -1) {
    chatList.value.splice(index, 1)
  }
}

// 发送消息
const handleSendMessage = (text: string) => {
  console.log('发送消息:', text)
  // 这里可以添加发送消息的逻辑
}
</script>

<template>
  <div class="flex flex-col h-screen">
    <!-- 主要内容区 -->
    <main class="flex flex-1 overflow-hidden">
      <!-- 侧边栏 -->
      <Sidebar @new-chat="handleNewChat" @delete-chat="handleDeleteChat" />

      <!-- 聊天区域 -->
      <div class="flex-1 flex flex-col">
        <!-- 顶部导航栏 -->
        <Header :model-name="currentModel.name" @open-model-selector="openModelSelector" />

        <!-- 消息区域 -->
        <MessageArea :model-name="currentModel.name" />

        <!-- 输入区域 -->
        <InputArea
          :model-name="currentModel.name"
          @send-message="handleSendMessage"
          @open-model-selector="openModelSelector"
        />
      </div>
    </main>

    <!-- 模型选择器 -->
    <ModelSelector v-if="showModelSelector" @close="closeModelSelector" @select="selectModel" />

    <!-- 引用文件弹框 -->
    <BaseDialog
      v-model="isDialogOpen"
      title="自定义对话框标题"
      width="max-w-lg"
      @close="closeDialog"
    >
      <!-- 默认插槽：放置自定义内容 -->
      <div>
        <p>这里是对话框的主要内容区域。</p>
        <p>你可以放置任何 HTML 或 Vue 组件。</p>
        <input type="text" class="border p-1 mt-2 w-full" placeholder="输入框示例" />
      </div>

      <!-- 底部插槽：放置按钮 -->
      <template #footer>
        <div class="flex justify-end space-x-3">
          <button
            @click="closeDialog"
            class="px-4 py-2 rounded-md text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50"
          >
            取消
          </button>
          <button
            @click="
              () => {
                console.log('执行操作')
                closeDialog()
              }
            "
            class="px-4 py-2 rounded-md text-sm font-medium text-white bg-green-600 hover:bg-green-700"
          >
            执行操作
          </button>
        </div>
      </template>
    </BaseDialog>
  </div>
</template>

<style scoped>
/* 添加iconfont样式覆盖，调整大小和对齐 */
.iconfont {
  font-size: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 确保文本大小适当 */
:deep(.icon-ios-arrow-down) {
  font-size: 14px !important;
}
</style>
